<template>
        <div class="mb-3 row"></div>

        <div class="mb-3 row">
            <label for="inputname" class="col-sm-3 col-form-label " style="text-align: right;">查找</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="inputname" v-model="bookname">
            </div>

            <div class=" col-sm-1">
                <button class="btn btn-primary" @click="search">search</button>
            </div>
            <div class="col-sm-1"></div>
        </div>
 
        <table class="table table-striped table-bordered table-hover ">
            <thead>
                <tr>
                    <th>#</th>
                    <th>书名</th>
                    <th>作者</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td> {{ item.author }} </td>
                </tr>
            </tbody>
        </table>

    <div>
        <div class="mb-3 row ">
            <h3 class="text-center">添加书籍</h3>
        </div>
        <div class="mb-3 row ">
            <label for="addname" class="col-sm-3 col-form-label " style="text-align: right;">书名</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="addname" v-model="name">
            </div>
            <div class="col-sm-3"></div>
        </div>
        <div class="mb-3 row ">
            <label for="addauthor" class="col-sm-3 col-form-label " style="text-align: right;">作者</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" id="addauthor" v-model="author">
            </div>
            <div class="col-sm-3"></div>
        </div>
        <div class="mb-3 row ">
          <div class="col-sm-3"></div>  <button class="btn btn-primary col-sm-6" @click="add">新增</button>
            <!-- {{ list }} -->
        </div>
        <div class="col-sm-3"></div>
    </div>
</template>
<script setup>
import { ref, getCurrentInstance, onMounted } from 'vue'
const bookname = ref('');
const list = ref([]);
const { proxy } = getCurrentInstance();
const search = () => {
    proxy.$axios({
        url: '/mock/searchbooks',
        method: 'post',
        data: {
            name: bookname.value
        }
    }).then(res => {
        console.log(res)
        list.value = res.data.data;
    }).catch(error => {
        console.log(error)
    })
}
const name = ref('');
const author=ref('')
const add = ()=>{
    proxy.$axios({
        url:'/app/addbook',
        method:'post',
        data:{
            name:name.value,
            author:author.value
        }
    }).then(res => {
        console.log(res)
        list.value = res.data.data;
    }).catch(error => {
        console.log(error)
    })
}
onMounted(() => {
    proxy.$axios({
        url: '/mock/getbooks',

    }).then(res => {
        console.log(res)
        list.value = res.data.data;
    }).catch(error => {
        console.log(error)
    })
})
</script>
<style></style>
